<template>
    <div class="sorder">
        <div class="sordertitle">
            <el-row :gutter="20">
                <el-col :span="8">
                    <div class="grid-content bg-purple">
                        <el-form :model="taskForm">
                            <el-form-item label="时间段选择：">
                                <el-date-picker
                                        v-model="datavalue"
                                        type="datetimerange"
                                        format="yyyy-MM-ddHH:mm:ss"
                                        value-format="yyyy-MM-ddHH:mm:ss"
                                        range-separator="至"
                                        start-placeholder="开始日期"
                                        end-placeholder="结束日期"
                                        size="medium"
                                >
                                </el-date-picker>
                            </el-form-item>
                        </el-form>


                    </div>
                </el-col>

                <el-col :span="16" style="text-align: left;">
                    <div class="grid-content bg-purple">
                        <el-button type="primary" style="background-color: #099FB8" @click="searchMyData">查询</el-button>
                    </div>
                </el-col>
            </el-row>
        </div>
        <div class="sordertable">
            <el-row>
                <el-col :span="24">
                    <div class="grid-content bg-purple-dark">
                        <el-table
                                :cell-style="rowClass"
                                :header-cell-style="headClass"
                                border
                                :data="tableData"
                                style="width: 100%">
                            <el-table-column
                                    label="时间"
                                    width="400">
                                <template slot-scope="scope">
                                    <span style="margin-left: 10px">{{ scope.row.startTime}}</span>
                                </template>
                            </el-table-column>
                            <el-table-column
                                    label="订单金额"
                                    width="150">
                                <template slot-scope="scope">
                                    {{scope.row.orderAmount}}
                                </template>
                            </el-table-column>
                            <el-table-column
                                    label="订单笔数"
                                    width="150">
                                <template slot-scope="scope">
                                    {{ scope.row.orderNumber}}
                                </template>
                            </el-table-column>
                            <el-table-column
                                    label="退货金额"
                                    width="150">
                                <template slot-scope="scope">
                                    {{ scope.row.returnOrderAmount}}
                                </template>
                            </el-table-column>
                            <el-table-column
                                    label="退单笔数"
                                    width="100">
                                <template slot-scope="scope">
                                    {{ scope.row.returnOrderNumber}}
                                </template>
                            </el-table-column>
                            <el-table-column
                                    label="操作"
                            >
                                <template slot-scope="scope">
                                    <el-button
                                            class="details"
                                            size="mini"
                                            @click="handleEdit(scope.$index, scope.row)">查看明细</el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                    </div>
                </el-col>
            </el-row>
        </div>
        <el-pagination
                background
                layout="prev, pager, next"
                :page-size="5"
                :pager-count="7"
                :total="20"
                @current-change="changePage"
                :current-page="currentPage">
        </el-pagination>
        <el-dialog title="明细"  :visible.sync="mingxiVisible" class="mingxi">
            <el-table
                    :data="currentData"
            >
                <el-table-column
                        prop="orderNumber"
                        label="单号"
                >
                </el-table-column>
                <el-table-column
                        prop="orderMainPrice"
                        label="金额"
                >
                </el-table-column>
                <el-table-column
                        prop="out"
                        label="出库状态"
                >
                </el-table-column>
                <el-table-column
                        prop="receipt"
                        label="发货状态"
                >
                </el-table-column>
                <el-table-column
                        prop="orderAuditStatus"
                        label="审核"
                >
                </el-table-column>
                <el-table-column
                        prop="receivingAddress"
                        label="收货地址"
                >
                </el-table-column>

            </el-table>
        </el-dialog>
    </div>

</template>

<script>
    import axios from '../../util/http'

    import {mapActions,mapState} from 'vuex'
    export default {
        name: "StatisticsOrder",
        data() {
            return {
                /* currentData: [{
                     orderNumber:'',
                     orderMainPrice:'',
                     out:'',
                     receipt:'',
                     orderAuditStatus:'',
                     receivingAddress:""
                 }],*/
                currentData:[],

                /* pickerOptions: {
                     shortcuts: [{
                         text: '最近一周',
                         onClick(picker) {
                             const end = new Date();
                             const start = new Date();
                             start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                             picker.$emit('pick', [start, end]);
                         }
                     }, {
                         text: '最近一个月',
                         onClick(picker) {
                             const end = new Date();
                             const start = new Date();
                             start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                             picker.$emit('pick', [start, end]);
                         }
                     }, {
                         text: '最近三个月',
                         onClick(picker) {
                             const end = new Date();
                             const start = new Date();
                             start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                             picker.$emit('pick', [start, end]);
                         }
                     }]
                 },*/
                taskForm: {
                    startTime: null,
                    endTime: null
                },
                mingxiVisible: false,
                currentPage:1,
                /*    tableData: [{
                        startTime: '2020-03-12',
                        orderAmoun:'￥2,219元',
                        orderNumber:'0笔',
                        returnOrderAmount:'￥0.00元',
                        returnOrderNumber:'0笔',
                        orderMainList:[{
                            orderNumber:20,
                            orderMainPrice:20,
                            out:'1',
                            receipt:'1',
                            orderAuditStatus:'1',

                            receivingAddress:"niubi"
                        }]
                    }, {
                        startTime: '2020-03-12',
                        orderAmoun:'￥2,219元',
                        orderNumber:'0笔',
                        returnOrderAmount:'￥0.00元',
                        returnOrderNumber:'0笔'
                    }, {
                        startTime: '2020-03-12',
                        orderAmoun:'￥2,219元',
                        orderNumber:'0笔',
                        returnOrderAmount:'￥0.00元',
                        returnOrderNumber:'0笔'
                    }, {
                        startTime: '2020-03-12',
                        orderAmoun:'￥2,219元',
                        orderNumber:'0笔',
                        returnOrderAmount:'￥0.00元',
                        returnOrderNumber:'0笔'
                    },{
                        startTime: '2020-03-12',
                        orderAmoun:'￥2,219元',
                        orderNumber:'0笔',
                        returnOrderAmount:'￥0.00元',
                        returnOrderNumber:'0笔'
                    }]*/

            }
        },
        computed:{
            tableData(){
                console.log(this.$store.state.statisticOrder.tableData)
              /*  console.log(Object.values(this.$store.state.statisticOrder.tableData))
                return Object.values(this.$store.state.statisticOrder.tableData)*/
               return this.$store.state.statisticOrder.tableData

            },


            datavalue: {
                get() {
                    if (this.taskForm.startTime && this.taskForm.endTime) {
                        return [this.taskForm.startTime, this.taskForm.endTime]
                    } else {
                        return []
                    }
                },
                set(v) {
                    console.log(v)
                    this.taskForm.startTime = v[0]
                    this.taskForm.endTime = v[1]
                }
            }


        },
        methods: {
            ...mapActions(['getOrderStatisticData','selectOrderStatisticData']),

            handleEdit(index, row) {
                console.log(index);
                console.log(this.tableData[index].orderMainList)
                this.mingxiVisible=true
                /* if (this.tableData[index].orderMainList.out===1) {

                    /!* this.tableData[index].orderMainList.out="已出库"*!/
                 }
                 else if (this.tableData[index].orderMainList.out===0)
                 {this.tableData[index].orderMainList.out="未出库"}

                 if (this.tableData[index].orderMainList.receipt===1) {
                     this.tableData[index].orderMainList.receipt="已发货"
                 }
                 else if (this.tableData[index].orderMainList.receipt===0)
                 {this.tableData[index].orderMainList.receipt="未发货"}

                 if(this.tableData[index].orderMainList.orderAuditStatus===0){
                     this.tableData[index].orderMainList.orderAuditStatus="订单审核"
                 }
                 else if (this.tableData[index].orderMainList.orderAuditStatus===1){
                     this.tableData[index].orderMainList.orderAuditStatus="财务审核"
                 }
                 else if (this.tableData[index].orderMainList.orderAuditStatus===2){
                     this.tableData[index].orderMainList.orderAuditStatus="出库审核"


                 }else if (this.tableData[index].orderMainList.orderAuditStatus===3){
                     this.tableData[index].orderMainList.orderAuditStatus="发货审核"
                 }
                 else if (this.tableData[index].orderMainList.orderAuditStatus===4){
                     this.tableData[index].orderMainList.orderAuditStatus="发货确认"
                 }
                 else if (this.tableData[index].orderMainList.orderAuditStatus===5){
                     this.tableData[index].orderMainList.orderAuditStatus="订单收货确认"
                 }
                 else if(this.tableData[index].orderMainList.orderAuditStatus===10){
                     this.tableData[index].orderMainList.orderAuditStatus="已作废"
                 }*/
                console.log( this.tableData[index].orderMainList)
                Object.assign(this.currentData,this.tableData[index].orderMainList)
                console.log(this.currentData)
                for (var i = 0; i <this.currentData.length; i++) {
                    var item = this.currentData[i];
                    if (item.out === "1") {
                        item.out = "已出库";
                    }
                    if (item.out === "0") {
                        item.out = "未出库";
                    }
                    if (item.receipt ==="1" ) {
                        item.receipt = "已发货"
                    } else if (item.receipt ==="0" ) {
                        item.receipt = "未发货"
                    }
                    if (item.orderAuditStatus === "0") {
                        item.orderAuditStatus = "订单审核"
                    } else if (item.orderAuditStatus === "1") {
                        item.orderAuditStatus = "财务审核"
                    } else if (item.orderAuditStatus === "2") {
                        item.orderAuditStatus = "出库审核"
                    } else if (item.orderAuditStatus === "3") {
                        item.orderAuditStatus = "发货审核"
                    } else if (item.orderAuditStatus === "4") {
                        item.orderAuditStatus = "发货确认"
                    } else if (item.orderAuditStatus ==="5") {
                        item.orderAuditStatus = "订单收货确认"
                    } else if (item.orderAuditStatus === "10") {
                        item.orderAuditStatus = "已作废"
                    }
                }


            },
            handleDelete(index, row) {
                console.log(index, row);
            },
            // 表头样式设置
            headClass () {
                return 'text-align: center;background:#F5F6F7;'
            },
            // 表格样式设置
            rowClass () {
                return 'text-align: center;'
            },
            changePage(val) {
                this.currentPage = val
            },
            searchMyData(){
                /* console.log(this.datavalue)
                 console.log(this.datavalue[0])
                 console.log(this.datavalue[1])*/

                /* var startTime=this.datavalue[0]
                 var endTime=this.dataValue[1]*/
                let obj={
                    clientId:this.$store.state.user.userId,
                    startTime:this.taskForm.startTime,
                    endTime:this.taskForm.endTime
                }
                if (this.taskForm.startTime && this.taskForm.endTime) {
                    this.selectOrderStatisticData(obj)
                }else {
                    this.getOrderStatisticData(obj)
                    this.$message({
                        message: '警告，请选择时间',
                        type: 'warning'
                    });
                }

            },
        },
        created(){
            /*console.log(this.$store.state.user.userId)
            let obj={clientId:this.$store.state.user.userId}*/
            this.getOrderStatisticData()
        }
    }
</script>

<style scoped>
    .sordertitle{
        margin: 20px 0;
    }
    .el-dropdown{
        color: #606266;
        font-size: 14px;
    }
    .sot1{
        color: #606266;
        font-size: 14px;
        margin: 0 10px;
    }
    .el-table-column{
        text-align: center;
        background-color: #F5F6F7;
    }
    .details{
        color: white;
        background-color: #099FB8;
    }
    .el-pagination{
        text-align: center;
        margin-top: 20px;
    }
</style>